<template>
  <div class="daemonset">
    <el-row>
      <el-col :span="24">
        <div>
          <el-card
            class="daemonset-head-card"
            shadow="never"
            :body-style="{ padding: '10px' }"
          >
            <el-row>
              <el-col :span="6">
                <div>
                  <span>命名空间: </span>
                  <el-select
                    v-model="searchQuery.namespace"
                    filterable
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="(item, index) in nsList"
                      :key="index"
                      :label="item.metadata.name"
                      :value="item.metadata.name"
                    />
                  </el-select>
                </div>
              </el-col>
              <el-col :span="2" :offset="16">
                <div>
                  <el-button
                    style="border-radius: 2px"
                    icon="Refresh"
                    plain
                    @click="getDaemonSets()"
                    >刷新</el-button
                  >
                </div>
              </el-col>
            </el-row>
          </el-card>
        </div>
      </el-col>
      <el-col :span="24">
        <div>
          <el-card
            class="daemonset-head-card"
            shadow="never"
            :body-style="{ padding: '10px' }"
          >
            <el-row>
              <el-col :span="2">
                <div>
                  <el-button
                    disabled
                    style="border-radius: 2px"
                    icon="Edit"
                    type="primary"
                    >创建</el-button
                  >
                </div>
              </el-col>
              <el-col :span="6">
                <div>
                  <el-input
                    v-model="searchQuery.name"
                    class="daemonset-head-search"
                    clearable
                    placeholder="请输入"
                  />
                  <el-button
                    style="border-radius: 2px"
                    icon="Search"
                    type="primary"
                    plain
                    @click="getDaemonSets()"
                    >搜索</el-button
                  >
                </div>
              </el-col>
            </el-row>
          </el-card>
        </div>
      </el-col>
      <el-col :span="24">
        <div>
          <el-card
            class="daemonset-body-card"
            shadow="never"
            :body-style="{ padding: '5px' }"
          >
            <el-table
              v-loading="loading"
              style="width: 100%; font-size: 12px; margin-bottom: 10px"
              :data="daemonSetList"
            >
              <el-table-column width="20" />
              <el-table-column align="left" label="DaemonSet名">
                <template v-slot="scope">
                  <a class="daemonset-body-daemonsetname">{{
                    scope.row.metadata.name
                  }}</a>
                </template>
              </el-table-column>
              <el-table-column align="center" label="标签">
                <template v-slot="scope">
                  <div
                    v-for="(val, key) in scope.row.metadata.labels"
                    :key="key"
                  >
                    <el-popover
                      placement="right"
                      :width="200"
                      trigger="hover"
                      :content="key + ':' + val"
                    >
                      <template #reference>
                        <el-tag style="margin-bottom: 5px" type="warning">{{
                          ellipsis(key + ":" + val)
                        }}</el-tag>
                      </template>
                    </el-popover>
                  </div>
                </template>
              </el-table-column>
              <el-table-column align="center" label="容器组">
                <template v-slot="scope">
                  <span
                    >{{
                      scope.row.status.numberAvailable > 0
                        ? scope.row.status.numberAvailable
                        : 0
                    }}
                    /
                    {{
                      scope.row.status.desiredNumberScheduled > 0
                        ? scope.row.status.desiredNumberScheduled
                        : 0
                    }}
                  </span>
                </template>
              </el-table-column>
              <el-table-column align="center" min-width="100" label="创建时间">
                <template v-slot="scope">
                  <el-tag type="info"
                    >{{ timeTrans(scope.row.metadata.creationTimestamp) }}
                  </el-tag>
                </template>
              </el-table-column>
              <el-table-column align="center" label="镜像">
                <template v-slot="scope">
                  <div
                    v-for="(val, key) in scope.row.spec.template.spec
                      .containers"
                    :key="key"
                  >
                    <el-popover
                      placement="right"
                      :width="200"
                      trigger="hover"
                      :content="val.image"
                    >
                      <template #reference>
                        <el-tag style="margin-bottom: 5px">{{
                          ellipsis(
                            val.image.split("/")[2] == undefined
                              ? val.image
                              : val.image.split("/")[2]
                          )
                        }}</el-tag>
                      </template>
                    </el-popover>
                  </div>
                </template>
              </el-table-column>
              <el-table-column align="center" label="操作" width="200">
                <template v-slot="scope">
                  <el-button
                    size="small"
                    style="border-radius: 2px"
                    icon="Edit"
                    type="primary"
                    plain
                    @click="getDaemonSetDetails(scope.namespace, scope.name)"
                    >YAML</el-button
                  >
                  <el-button
                    size="small"
                    style="border-radius: 2px"
                    icon="Delete"
                    type="danger"
                    @click="handleConfirm(scope, '删除', deleteDaemonSet)"
                    >删除</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
            <el-pagination
              class="daemonset-body-pagination"
              background
              :current-page="pager.currentPage.value"
              :page-sizes="pager.limitList.value"
              :page-size="pager.limit.value"
              layout="total, sizes, prev, pager, next, jumper"
              :total="pager.total.value"
            />
          </el-card>
        </div>
      </el-col>
    </el-row>
    <el-dialog v-model="yamlDialog" title="YAML信息" width="45%" top="5%">
      <codemirror
        :value="srcYamlContent"
        border
        :options="cmOptions"
        height="500"
        style="font-size: 14px"
        @change="onChange"
      />
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="yamlDialog = false">取 消</el-button>
          <el-button type="primary" @click="updateDaemonSet()">更 新</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import common from "../common/Config";
import provider from "./daemonSetProvider";
import nsProvider from "../namespace/nsProvider";

import {
  ellipsis,
  timeTrans,
  handleConfirm
} from "@/views/domain/kubeHud/utils";
import { load } from "@amap/amap-jsapi-loader";

const { cmOptions } = common;

const { nsList } = nsProvider;

const {
  getDaemonSets,
  getDaemonSetDetails,
  updateDaemonSet,
  deleteDaemonSet,
  yamlDialog,
  srcYamlContent,
  loading,
  daemonSetList,
  searchQuery,
  pager
} = provider;

const onChange = val => {
  srcYamlContent.value = val;
};

/*
import common from "../common/Config";
import yaml2obj from "js-yaml";
import json2yaml from "json2yaml";
import { getNamespecelist } from "@/views/domain/kubeHud/api/k8s/namespace";
import {
  DeleteDaemonSet,
  GetDaemonSet,
  GetDaemonSetDetail,
  UpdateDaemonSet
} from "@/views/domain/kubeHud/api/k8s/daemonset";
export default {
  data() {
    return {
      //编辑器配置
      cmOptions: common.cmOptions,
      contentYaml: "",
      //分页
      currentPage: 1,
      pagesize: 10,
      pagesizeList: [10, 20, 30],
      //
      searchInput: "",
      namespaceValue: "default",
      namespaceList: [],
      appLoading: false,
      daemonSetList: [],
      daemonSetTotal: 0,
      getDaemonSetsData: {
        params: {
          filter_name: "",
          namespace: "",
          page: "",
          limit: ""
        }
      },
      //详情
      daemonSetDetail: {},
      getDaemonSetDetailData: {
        params: {
          name: "",
          namespace: ""
        }
      },
      //yaml更新
      yamlDialog: false,
      updateDaemonSetData: {
        params: {
          namespace: "",
          content: ""
        }
      },
      //删除
      delDaemonSetData: {
        params: {
          daemonset_name: "",
          namespace: ""
        }
      }
    };
  },
  watch: {
    namespaceValue: {
      handler() {
        localStorage.setItem("namespace", this.namespaceValue);
        this.currentPage = 1;
        this.getDaemonSets();
      }
    }
  },
  beforeMount() {
    if (
      localStorage.getItem("namespace") !== undefined &&
      localStorage.getItem("namespace") !== null
    ) {
      this.namespaceValue = localStorage.getItem("namespace");
    }
    this.getNamespaces();
    this.getDaemonSets();
  },
  methods: {
    transYaml(content) {
      return json2yaml.stringify(content);
    },
    transObj(content) {
      return yaml2obj.load(content);
    },
    onChange(val) {
      this.contentYaml = val;
    },
    handleSizeChange(size) {
      this.pagesize = size;
      this.getDaemonSets();
    },
    handleCurrentChange(currentPage) {
      this.currentPage = currentPage;
      this.getDaemonSets();
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then(() => {
          done();
        })
        .catch(() => {});
    },
    ellipsis(value) {
      return value.length > 15 ? value.substring(0, 15) + "..." : value;
    },
    timeTrans(timestamp) {
      let date = new Date(new Date(timestamp).getTime() + 8 * 3600 * 1000);
      date = date.toJSON();
      date = date.substring(0, 19).replace("T", " ");
      return date;
    },
    restartTotal(e) {
      let index,
        sum = 0;
      let containerStatuses = e.row.status.containerStatuses;
      for (index in containerStatuses) {
        sum = sum + containerStatuses[index].restartCount;
      }
      return sum;
    },
    getNamespaces() {
      getNamespecelist()
        .then(res => {
          this.namespaceList = res.data.items;
        })
        .catch(res => {
          this.$message.error({
            message: res.msg
          });
        });
    },
    getDaemonSets() {
      this.appLoading = true;
      this.getDaemonSetsData.params.filter_name = this.searchInput;
      this.getDaemonSetsData.params.namespace = this.namespaceValue;
      this.getDaemonSetsData.params.page = this.currentPage;
      this.getDaemonSetsData.params.limit = this.pagesize;
      GetDaemonSet(this.getDaemonSetsData.params)
        .then(res => {
          this.daemonSetList = res.data.items;
          this.daemonSetTotal = res.data.total;
        })
        .catch(res => {
          this.$message.error({
            message: res.msg
          });
        });
      this.appLoading = false;
    },
    getDaemonSetDetail(e) {
      this.getDaemonSetDetailData.params.name = e.row.metadata.name;
      this.getDaemonSetDetailData.params.namespace = this.namespaceValue;
      GetDaemonSetDetail(this.getDaemonSetDetailData.params)
        .then(res => {
          this.daemonSetDetail = res.data;
          this.contentYaml = this.transYaml(this.daemonSetDetail);
          this.yamlDialog = true;
        })
        .catch(res => {
          this.$message.error({
            message: res.msg
          });
        });
    },
    updateDaemonSet() {
      let content = JSON.stringify(this.transObj(this.contentYaml));
      this.updateDaemonSetData.params.namespace = this.namespaceValue;
      this.updateDaemonSetData.params.content = content;
      UpdateDaemonSet(this.updateDaemonSetData.params)
        .then(res => {
          this.$message.success({
            message: res.msg
          });
        })
        .catch(res => {
          this.$message.error({
            message: res.msg
          });
        });
      this.yamlDialog = false;
    },
    delDaemonSet(e) {
      this.delDaemonSetData.params.daemonset_name = e.row.metadata.name;
      this.delDaemonSetData.params.namespace = this.namespaceValue;
      DeleteDaemonSet(this.delDaemonSetData.params)
        .then(res => {
          this.getDaemonSets();
          this.$message.success({
            message: res.msg
          });
        })
        .catch(res => {
          this.$message.error({
            message: res.msg
          });
        });
    },
    handleConfirm(obj, operateName, fn) {
      this.confirmContent = "确认继续 " + operateName + " 操作吗？";
      this.$confirm(this.confirmContent, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消"
      })
        .then(() => {
          fn(obj);
        })
        .catch(() => {
          this.$message.info({
            message: "已取消操作"
          });
        });
    }
  }
};
*/
</script>

<style scoped>
.daemonset-head-card,
.daemonset-body-card {
  border-radius: 1px;
  margin-bottom: 5px;
}
.daemonset-head-search {
  width: 160px;
  margin-right: 10px;
}
.daemonset-body-daemonsetname {
  color: #4795ee;
}
.daemonset-body-daemonsetname:hover {
  color: rgb(84, 138, 238);
  cursor: pointer;
  font-weight: bold;
}
</style>
